<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>运动数据</title>
</head>

<body class="dpflex fdcolumn" id="body">

    <div class="content flex1">
        <!-- 返回icon -->
        <i class="iconfont icon-left dpflex" id="backBtn"></i>
        <div class="sport-top-wrapper">
            <div class="dpflex header-data">
                <div class="title fw fs18">我的运动数据</div>
                <!-- 头像 -->
                <img id="portrait" class="head-portrait mr16" src="../img/moren.jpg" alt="">
            </div>
            <div class="dpflex run-consume">
                <div class="dpflex fdcolumn minutenumbox flex1">
                    <span class="fw">总运动</span>
                    <span class="mt8">
                        <span class="minutenum fs28" id="minuteNum">10</span>
                        <span class="fs18">分钟</span>
                    </span>
                </div>
                <div class="dpflex fdcolumn flex1 calorienumbox">
                    <span class="fw">本周消耗</span>
                    <span class="mt8">
                        <span class="calorienum fs28" id="calorienum">10</span>
                        <span class="fs18">千卡</span>
                    </span>
                </div>
            </div>
            <div class="consume-total-continuous dpflex">
                <span class="dpflex fdcolumn consume">
                    <span class="fw">消耗</span>
                    <span id="consumenum">0</span>
                </span>
                <span class="dpflex fdcolumn consume">
                    <span class="fw">累计(天)</span>
                    <span id="addnum">0</span>
                </span>
                <span class="dpflex fdcolumn consume">
                    <span class="fw">连续(天)</span>
                    <span id="succession">0</span>
                </span>
            </div>
        </div>
        <!-- 柱状图 -->
        <div id="sportTime" class="echart-wrapper"></div>
        <!-- 饼图 -->
        <div class="echart-wrapper" id="pie"></div>
        <!-- 折线图 -->
        <div class="echart-wrapper" id="basic"></div>
        <!--  -->
        <div class="echart-wrapper" id="pile"></div>


        <div class="occupied"></div>
    </div>
   


    <!-- 引入echarts在线cdn -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>

</body>

</html>